<script setup>
import TabbarTea from "../component/TabbarTea.vue";
const toTargetPage = () => {
  const targetUrl = "/pages/Homepage/examine";
  uni.navigateTo({
    url: targetUrl
  });
};

</script>


<template>

  <view class="back">
    <view>
      <view class="cd">
        <view class="ts">
          <view class="title1">1个留校登记待审批</view>
        </view>

        <view class="pc">
          <image class="icon" src="/static/image/bg@2x.png" @click="toTargetPage"></image>
          <view class="zj">
            <view class="lg">
              <image class="bz" src="/static/image/bz@2x.png"></image>
              <view>
                <text class="title2">2024年春节放假</text>
              </view>
            </view>
          <view>

            <view class="wz">
              <text class="title3">
                假期开始时间：2023-11-16 00:00:00 <br>
                假期结束时间：2023-11-16 00:00:00 <br>
                时长：26天
              </text>
              <view class="line"></view>

            <view class="buttonAll1">
              <view class="intext">
                <text>留校登记待审批</text>
              </view>

              <view class="buttonClick1">
                <button
                    class="action-btn"
                    @click="toTargetPage"
                >
                  <text>同意留校</text>
                </button>
              </view>
            </view>
            </view>
          </view>
          <view>
              <hr class="hr">
            </view>
          </view>
        </view>
      </view>
    </view>
    <view>
      <TabbarTea :cur-index="0"/>
    </view>
  </view>
</template>

<style scoped>
.cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.back{
  background-color: #F2F4F7;
  height: 670px;
  padding-top: 12px;
}
.ts {
  width: 375px;
  height: 32px;
  background: #FFEEDD;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.title1 {
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #FF5F00;
  text-align: center;
  line-height: 17px;
  white-space: nowrap;
}

.pc {
  display: flex;
  justify-content: center;
  position: relative;
}

.icon {
  width: 351px;
  height: 180px;
  display: block;
}
.zj{
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}
.bz{
  width: 22px;
  height: 22px;
  display: block;
  margin-right: 8px;
}
.title2 {
  width: 119px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
}
.lg {
  display: flex;
  align-items: center;
}
.title3{
  width: 203px;
  height: 66px;
  font-weight: 400;
  font-size: 12px;
  color: #5D5E5D;
  line-height: 22px;
}
.hr{
  width: 300px;
  margin: 8px 0;
  border: none;
  border-top: 1px solid #ccc;
}
.action-btn {
  background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
  color: white;
  border: none;
  border-radius: 3px; /* 圆角同步缩小，更协调 */
  padding: 1px 6px; /* 内边距大幅缩减（上下1px，左右6px），按钮更小 */
  font-size: 10px; /* 字体进一步缩小到10px，适配按钮尺寸 */
  font-weight: 500;
  cursor: pointer;
  outline: none;
  margin: 0; /* 消除按钮自身margin，确保贴右 */
}
.buttonClick1{
  width: 65px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-size: 11px;
  color: #FFFFFF;
  text-align: center;
}

.buttonAll1{
  display: flex;
  justify-content: space-between;
}

 .line {
   height: 1px;
   background-color: #eee;
   margin: 10px 0;
 }
.intext{
  font-size: 12px;
  color: #5D5E5D;
  line-height: 22px;
}
</style>

